import React from 'react'
import './index.css'
export default function Footer({ todoList, setTodoList }) {
  
  //多选框全选逻辑
  const checkAllHandle=(e)=>{
    const newTodoList =todoList.map(item=>{
      return {...item,done:e.target.checked}
    })
    setTodoList(newTodoList)
  }
  //删除选中的任务的逻辑
  const deleteTodoList=()=>{
    const newTodoList =todoList.filter(item=>!item.done)
    setTodoList(newTodoList)
  }

  return (
    <div className="todo-footer">
      <label>
        <input type="checkbox" 
        onChange={checkAllHandle}
        //多选框等于数组长度的且不为0的时候为√
        checked={ todoList.reduce(
          (p, c) => c.done ? p + 1 : p, 0)===todoList.length
          &&todoList.length!==0}/>
      </label>
      <span>
        <span>已完成{
          todoList.reduce((p, c) => c.done ? p + 1 : p, 0)
        }</span> / 全部{todoList.length}
      </span>
      <button className="btn btn-danger" onClick={deleteTodoList}>清除已完成任务</button>
    </div>
  )
}
